<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts/echarts.js"></script>
<script>

    var teachers = '${teachers}';
    var teacher = '<option value="">--请选择--</option>'+teachers;
    $("#teacherSearch").html(teacher);

    var myChart;
    require.config({
        paths: {
            echarts:  '${pageContext.request.contextPath}'+'/js/echarts'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/line',
            'echarts/chart/bar'
        ],
        function (echarts) {
            myChart = echarts.init(document.getElementById('tj1'));
            dataListInit();
        });
    searchAction();
    // 分页查询参数
    function queryParams(params) {

        var temp = {
            teacherName:$('#teacherSearch').val(),
            grade:$('#grade').val()
        }
        return temp;
    }

    // 表格初始化
    function dataListInit() {
        $('#dataList').bootstrapTable(
            {
                columns : [{
                    checkbox: true,
                    align: 'center'
                }, {
                    title: 'ID',
                    formatter: function (value, row, index) {
                        return index+1;
                    },
                    align: "center"
                },
                    {
                        field : 'teacher_name',
                        title : '教师姓名'
                    },
                    {
                        field : 'lesson_name',
                        title : '课程名'
                    },
                    {
                        field : 'lesson_class',
                        title : '年级'
                    },
					{
                        field : 'lesson_start_time',
                        title : '上课时间'
                    },
                    {
                        field : 'sign_number',
                        title : '学生数量'
                    }],
                url : '/onlineEdu/teacher/getTeacherClassStatistics',
                onLoadSuccess:function(data){
                    $("#total").html(data.studentCounts+"人");
                    setChartData(data.countsList);
                },
                onLoadError:function(status){
                    handleAjaxError(status);
                },
                method : 'GET',
                queryParams : queryParams,
                sidePagination : "server",
                dataType : 'json',
                pageNumber : 1,
                pageSize: 10,
                pageList : [5, 10, 25, 50, 100 ],
                clickToSelect : true
            });
    }

    function setChartData(data){

        var xDatas = ['本期','上期','上上期'],yDatas=[];
        yDatas.splice(0,yDatas.length);
        data.forEach(function (item, index) {
            yDatas.push(item);
        });
        if(yDatas.length>0) {
            myChart.clear();
            myChart.setOption({
                tooltip: {},
                legend: {
                    data: ['学生数量']
                },
                xAxis: {
                    type: 'category',
                    data: xDatas
                },
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} (人)'
                        }
                    }

                ],
                series: [{
                    name: '学生数量',
                    type: 'line',
                    data: yDatas
                }]
            });
            myChart.hideLoading();
        }
	}
    // 搜索动作
    function searchAction() {

        $('#search_button').click(function() {
            tableRefresh();
        })
    }
    // 表格刷新
    function tableRefresh() {
        $('#dataList').bootstrapTable('refresh', {
            query : {}
        });
    }
</script>
<div class="panel panel-default">
	<ol class="breadcrumb">
		<li><label class="form-label">教师当前教授班级情况统计</label></li>
	</ol>
	<div class="panel-body">
		<div class="row">
			<div style="width: 100%;margin-top: -16px" class="box-content">
				<table id="信息查询" class="table table-bordered table-hover table-responsive">
					<tbody>
					<tr>
						<td class="item-title" align="center">教师姓名</td>
						<td class="item-content-half">
							<select id="teacherSearch" class="form-control">
							</select>
						</td>
						<td class="item-title" align="center">年级</td>
						<td class="item-content-half">
							<select id="grade" class="form-control">
								<option value="">--请选择--</option>
								<option value="小班">小班</option>
								<option value="小升中">小升中</option>
								<option value="中班">中班</option>
								<option value="中升大">中升大</option>
								<option value="大班">大班</option>
								<option value="大升一">大升一</option>
								<option value="一年级">一年级</option>
								<option value="一升二">一升二</option>
								<option value="二年级">二年级</option>
								<option value="二升三">二升三</option>
								<option value="三年级">三年级</option>
								<option value="三升四">三升四</option>
								<option value="四年级">四年级</option>
								<option value="四升五">四升五</option>
								<option value="五年级">五年级</option>
								<option value="小升初">小升初</option>
							</select>
						</td>
					</tr>
					</tbody>
				</table>
			</div>

			<%--</div>--%>
		</div>
		<div style="text-align: right">
			<button id="search_button" style="text-align: right" class="btn btn-success">
				<span class="glyphicon glyphicon-search"></span> <span>查询</span>
			</button>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-body">
			<span class="glyphicon glyphicon-user" style="color: #5bc0de"></span>
			<span>当前学生总数:&nbsp;&nbsp;</span><span style="color: orangered;font-weight:bold;" id="total">&nbsp;</span>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="row" style="margin-top: 15px">
			<div class="col-md-12">
				<table id="dataList" class="table table-striped"></table>
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-body">
			<span>最近三期学生总数统计</span>
			<div style="height:300px;width:100%;" id='tj1'></div>
		</div>
	</div>
</div>
</div>

